<template>
	<view class="content">
		<view class="px-30 bgc-white">
			<u-form :model="form" ref="uForm" label-width="140">
				<u-form-item label="姓名" prop="contacts" :border-bottom="false">
					<u-input v-model="form.contacts" />
				</u-form-item>
				<u-form-item label="手机号" prop="phone" :border-bottom="false">
					<u-input v-model="form.phone" />
				</u-form-item>
				<u-form-item label="校区" prop="school" :border-bottom="false">
					<u-input v-model="form.school" type="select" @click="schoolShow = true" />
				</u-form-item>
				<u-form-item label="楼栋" prop="schoolBuilding" :border-bottom="false">
					<u-input v-model="form.schoolBuilding" type="select" @click="showBuildClick()" />
				</u-form-item>
				<u-form-item label="详细地址" prop="address" :border-bottom="false">
					<u-input v-model="form.address" type="textarea" />
				</u-form-item>
			</u-form>
		</view>

	<!-- 	<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="form.default" color="#2979ff" @change="switchChange" />
		</view> -->
		<button class="add-btn" @click="submit">提交</button>

		<!-- select框 -->
		<u-select v-model="schoolShow" label-name="name" value-name="id" :list="schoolList"
			@confirm="schoolConfirm"></u-select>
		<u-select v-model="buildingShow" label-name="name" value-name="id" :list="buildingList"
			@confirm="buildingConfirm"></u-select>
	</view>
</template>

<script>
	import {
		isMobile
	} from '@/utils/verify';
	import { mapState } from "vuex";
	// 表单验证规则
	const rules = {
		contacts: [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}],
		phone: [{
			required: true,
			message: '请输入正确的手机号',
			validator: (rule, value, callback) => {
				return isMobile(value);
			},
			trigger: ['blur', 'change']
		}],
		school: [{
			required: true,
			message: '请选择学校',
			trigger: ['blur', 'change']
		}],
		schoolBuilding: [{
			required: true,
			message: '请选择楼栋',
			trigger: ['blur', 'change']
		}],
		address: [{
			required: true,
			message: '请输入详细地址',
			trigger: ['blur', 'change']
		}]
	}
	export default {
		data() {
			return {
				rules, // 表单规则
				form: {
					contacts: '',
					phone: '',
					school: '',
					schoolId: '',
					schoolBuilding: '',
					schoolBuildingId: '',
					address: '',
					default: false
				},
				schoolShow: false, // 学校显隐
				buildingShow: false, // 楼栋显隐
				schoolList: [],
				buildingList: []
			}
		},
		computed:{
			...mapState(["userInfo"])
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			// 植入用户id
			this.form.userId = this.userInfo.id;
		},
		onLoad(option) {
			console.log(option);
			let title = '新增收货地址';
			if (option.type === 'edit') {
				title = '编辑收货地址'
				this.form = JSON.parse(option.data);
				console.log(this.form);
				this.form.school = this.form.comSchool.name;
				this.form.schoolBuilding = this.form.comSchoolBuilding.name;
				this.getComSchoolBuilding();
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
			this.getSchool();
		},
		methods: {
			showBuildClick() {
				if (!this.form.schoolId) return this.$u.toast('请先选择校区');
				this.buildingShow = true;
			},
			// 学校选择器确定
			schoolConfirm(e) {
				this.form.school = e[0].label;
				this.form.schoolId = e[0].value;
				this.getComSchoolBuilding();
			},
			// 获取楼栋
			async getComSchoolBuilding(){
				const data = await this.$u.api.getComSchoolBuilding({schoolId: this.form.schoolId});
				this.buildingList = data.dataList;
			},
			// 获取校园
			getSchool() {
				this.$u.api.getComSchool({}).then(res => {
					this.schoolList = res.dataList;
				})
			},
			// 楼栋选择器确定
			buildingConfirm(e) {
				this.form.schoolBuilding = e[0].label;
				this.form.schoolBuildingId = e[0].value;
			},
			switchChange(e) {
				this.addressData.default = e.detail;
			},
			//提交
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						if(this.form.id){
							// 修改
							const data = await this.$u.api.updateUserAddress(this.form);
						}else{
							const data = await this.$u.api.addUserAddress(this.form);
						}
						// this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
						// 就是要修改一下列表页的数据，然后返回
						this.$api.prePage().refreshList(this.form, this.manageType);
						this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
						// this.$api.prePage().refreshList(this.form, this.manageType);

					} else {
						console.log('验证失败');
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	::v-deep {
		.u-form-item__body {
			align-items: flex-start;
		}

		.u-input__textarea {
			margin-top: 4rpx;
		}
	}
</style>